import React, { useState, useEffect } from "react";
import BarCode from 'react-barcode';

interface ImgProps {
  detail: any,
}

export default (props: ImgProps) => {
  const { detail: {
    code,
    companyName,
    yearMonth,
    qzNo,
    cabinetCode,
    row,
    column
  } } = props;
  return <div className="print-item-content">
    <div className="col code">
      <h3 className="print-item-header">盒号</h3>
      <p className="print-item-text">{code}</p>
    </div>
    <div className="col company">
      <h3 className="print-item-header">{companyName}</h3>
    </div>
    <div className="col cabinetCode">
      <h3 className="print-item-header">柜号</h3>
      <p className="print-item-text">{cabinetCode}</p>
    </div>
    <div className="col row">
      <h3 className="print-item-header">行 {row}&nbsp;&nbsp;列 {column}</h3>
    </div>
    <div className="col yearMonth">
      <h3 className="print-item-header">所属期间</h3>
      <p className="print-item-text">{yearMonth}</p>
    </div>
    <div className="print-item-bar-code-content">
      <div className="print-item-bar-code">
        <BarCode
          width={1.5}
          height={120}
          value={code}
          formart="CODE128"
          displayValue={false}/>
      </div>
    </div>
    <div style={{ paddingRight: 20 }}></div>
  </div>;
};
